import React from 'react'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './Login.scss'
import axios from 'axios'
// import Particles from 'react-particles-js';
export default function Login(props) {
  const onFinish = (val) => {
    axios.get(`/users?username=${val.username}&password=${val.password}&roleState=true&_expand=role`).then(res => {
      console.log('提交成功===', res.data)
      if (res.data.length == 0) {
        message.error('用户名或密码不匹配！')
      } else {
        localStorage.setItem('token', JSON.stringify(res.data[0]))
        props.history.push('/')
      }
    })
  }
  return (
    <div className="warp-login">
      {/* <Particles height={document.documentElement.clientHeight}/> */}
      <div className="formContainer">
        <div className="login-title">全球新闻发布管理系统</div>
        <Form
          name="basic"
          className="login-form"
          onFinish={onFinish} 
        >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入账号！' }]}
        >
            <Input
              size="large"
              prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
            <Input
              size="large"
              prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password" />
        </Form.Item>
        <Form.Item>
          <Button size="large" type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
        </Form.Item>
      </Form>
      </div>
   </div>
  )
}